<template>
  <div class="order">
    <header>
      <div class="bd">
        <div class="left" @click="goBack">
          <van-icon name="arrow-left" size="20" />
        </div>
        <h2>确定订单</h2>
        <div class="right" @click="goPath">
          <van-icon name="home-o" size="20" />
        </div>
      </div>
    </header>
    <van-popup
      v-model="$store.state.show"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <Addlist />
    </van-popup>
    <div class="edit">
      <van-contact-card
        type="edit"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="onEdit"
      />
    </div>
    <section>
      <ul>
        <li v-for="item in orderList" :key="item.id">
          <van-card :price="item.price" :title="item.title">
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #thumb>
              <img :src="item.goodsImg" alt="" />
            </template>
            <template #num>
              <van-stepper
                v-model="item.val"
                theme="round"
                button-size="22"
                disable-input
              />
            </template>
          </van-card>
        </li>
      </ul>
    </section>
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <div class="pay-header" @click="show = false">
        <van-icon name="cross" size="20" color="#dcdcdc" />
      </div>
      <Pay />
    </van-popup>

    <footer>
      <van-submit-bar
        :price="count"
        button-text="提交订单"
        @submit="show = true"
      />
    </footer>
  </div>
</template>

<script>
import Addlist from "@/views/order/Addlist.vue";
import Pay from "@/views/order/Pay.vue";
import { getDetails } from "@/utils/api/api";
export default {
  data() {
    return {
      show: false,
      count:null,
      currentContact: {
        name: "张三",
        tel: "13000000000",
      },
      orderList:[]
    };
  },
  beforeMount() {
    this.$store.state.orderList.forEach(item => {
      getDetails(item.id).then(res => {
        console.log(res.data.data.data[0]);
        let data = res.data.data.data[0]
        data.val = item.stepVal
        this.count = (data.val * data.price) *100
        this.orderList.unshift(data)
      })
    })
    this.$store.state.orderList = []
  },
  components: {
    Addlist,
    Pay,
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goPath() {
      this.$router.push("/");
    },
    onEdit() {
      this.$store.commit("show");
    },
    onAdd() {
      console.log(111);
    },
  },
  // watch: {
  //   value() {
  //     this.count = (this.price * this.value) *100
  //   }
  // }
};
</script>

<style lang="less" scoped>
.order {
  header {
    .bd {
      background: #b0352f;
      position: fixed;
      height: 44px;
      top: 0;
      left: 0;
      z-index: 99;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      h2 {
        font-weight: 400;
        font-size: 16px;
      }
      .left,
      .right {
        width: 34px;
        height: 34px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .edit {
    margin-top: 44px;
  }
  section {
    margin-top: 10px;
    background: #fff;
    ul {
      li {
        img {
          width: 74px;
          height: 74px;
        }
      }
    }
  }
  .pay-header {
        padding: 20px;
        display: flex;
        justify-content:flex-end;
    }
}
</style>